<template>
  <div class="EmergencyDetail">
    <div class="flex location-wrap">
        <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置 </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/ResourceAllocation'}">资源调配</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/ResourceRequestList?type=${applyType == 1 ? 'team' : applyType == 2 ? 'car' : applyType == 3 ? 'equipment' : 'material'}` }">{{applyType == 1 ? "队伍" : applyType == 2 ? "车辆" : applyType == 3 ? "装备" : "物资"}}调配</el-breadcrumb-item>
        <el-breadcrumb-item>申请详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="EmergencyDetail-center">
      <TimeLine :activities="activities" :title="'应急事件流程'" />
      <div class="EmergencyDetail-add">
        <div class="EmergencyDetail-titel">
          <div class="EmergencyDetail-top">{{applyType == 1 ? "队伍" : applyType == 2 ? "车辆" : applyType == 3 ? "装备" : "物资"}}申请单</div>
          <div class="flexBetween">
            <div slot="title" class="flex">
              <div class="leftLine"></div>
              <div class="fontSize16">资源申请进度</div>
            </div>
            <el-row>
              <el-button size="mini" @click="AddFh">返回</el-button>
            </el-row>
          </div>
        </div>
        <div class="padding10-0">
          <div class="flexAround fontSize18 margin5-0">
            <div>申请</div>
            <div>审批</div>
            <div>派遣</div>
            <div>接收</div>
            <div>出发</div>
            <div>到达</div>
          </div>
          <el-steps :active="activeData.length" align-center>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 0 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 0 ? activeData[0].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 1 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 1 ? activeData[1].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 2 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 2 ? activeData[2].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 3 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 3 ? activeData[3].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 4 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{activeData.length > 4 ? activeData[4].businessTime : ""}}</div>
              </template>
            </el-step>
            <el-step>
              <template slot="icon">
                <span class="yuandian1" :class="activeData.length > 5 ? 'ydBgcolor' : ''"></span>
              </template>
              <template slot="title">
                <div class="fontWeight textNowrap">{{ activeData.length > 5 ? activeData[5].businessTime : ""}}</div>
              </template>
            </el-step>
          </el-steps>
        </div>
        <div class="EmergencyDetail-zt">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">信息来源</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('1')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="information_Sources_content">
                <div class="task_distribution">
                  <div class="flex">
                    <div class="labelDiv"> 响应命令单：</div><span @click="goSourceInfo">{{datas.sourceInfo}}</span>
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">基本信息</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('2')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="information_Sources_content">
                <div class="task_distribution marginB15">
                  <div class="flex">
                    <div class="labelDiv"> 资源申请单：</div><div>{{datas.resourceApplyName}}</div>
                  </div>
                </div>
                <div class="task_distribution information">
                  <div class="flex">
                    <div class="labelDiv">申请单位：</div>
                    <div>{{datas.applyUnit}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">需求等级：</div>
                    <div>{{datas.applyEvelName}}</div>
                  </div>
                  <div class="flex" v-if="applyType == 1">
                    <div class="labelDiv">需求人数：</div>
                    <div>{{datas.peopleCount}}</div>
                  </div>
                  <div class="flex" v-else-if="applyType == 3 || 4">
                    <div class="labelDiv">需求数量总和：</div>
                    <div>{{datas.peopleCount}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">受理单位及部门：</div>
                    <div>{{datas.acceptUnit}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">目的地点：</div>
                    <div>{{datas.destination}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">期望到达时间：</div>
                    <div>{{datas.expectArrivalTime}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">联系人：</div>
                    <div>{{datas.contact}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">联系方式：</div>
                    <div>{{datas.contactWay || '无'}}</div>
                  </div>
                </div>
                <div class="task_distribution marginB15">
                  <div style="display:flex;">
                    <div style="text-align:right" :class="datas.applyDescription && datas.applyDescription.length > 82 ? 'width176' : 'width150'">需求描述：</div>
                    <div>{{datas.applyDescription}}</div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">需求明细表</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('3')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="EmergencyList-table" v-if="applyType == 1">
                <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="datas.tableData" max-height="500px" tooltip-effect="dark" style="width: 100%" size="small">
                  <el-table-column type="index" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="teamTypeName" label="队伍类型" align="center">
                  </el-table-column>
                  <el-table-column prop="teamMajorName" label="队伍专业" align="center">
                  </el-table-column>
                  <el-table-column prop="memberMajorName" label="人员专业" align="center">
                  </el-table-column>
                  <el-table-column prop="memberAbilityName" label="特种作业能力" align="center">
                  </el-table-column>
                  <el-table-column prop="count" label="需求人数" align="center">
                  </el-table-column>
                  <el-table-column prop="remark" label="备注" align="center" width="500">
                  </el-table-column>
                </el-table>
              </div>
              <div class="EmergencyList-table" v-else-if="applyType == 2">
                <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="datas.tableData" max-height="500px" tooltip-effect="dark" style="width: 100%" size="small">
                  <el-table-column type="index" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="vehiclePropertiesName" label="车辆性质" align="center">
                  </el-table-column>
                  <el-table-column prop="vehicleUsageName" label="车辆用途" align="center">
                  </el-table-column>
                  <el-table-column prop="vehicleTypeName" label="车辆类型" align="center">
                  </el-table-column>
                  <el-table-column prop="count" label="需求数量" align="center">
                  </el-table-column>
                </el-table>
              </div>
              <div class="EmergencyList-table" v-else-if="applyType == 3">
                <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="datas.tableData" max-height="500px" tooltip-effect="dark" style="width: 100%" size="small">
                  <el-table-column type="index" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="largeCategoryName" label="装备大类" align="center">
                  </el-table-column>
                  <el-table-column prop="middleCategoryName" label="装备中类" align="center">
                  </el-table-column>
                  <el-table-column prop="smallCategoryName" label="装备小类" align="center">
                  </el-table-column>
                  <el-table-column prop="parametersName" label="型号参数" align="center">
                  </el-table-column>
                  <el-table-column prop="count" label="需求数量" align="center">
                  </el-table-column>
                </el-table>
              </div>
              <div class="EmergencyList-table" v-else-if="applyType == 4">
                <el-table border :header-cell-style="{ background:'#B1C8F9',color:'#000000', border: '1px solid #ccc'}" ref="multipleTable" :data="datas.tableData" max-height="500px" tooltip-effect="dark" style="width: 100%" size="small">
                  <el-table-column type="index" label="序号" width="80" align="center">
                  </el-table-column>
                  <el-table-column prop="largeCategoryName" label="物资大类" align="center">
                  </el-table-column>
                  <el-table-column prop="middleCategoryName" label="物资中类" align="center">
                  </el-table-column>
                  <el-table-column prop="smallCategoryName" label="物资小类" align="center">
                  </el-table-column>
                  <el-table-column prop="count" label="需求数量" align="center">
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
            <el-collapse-item name="4">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">填报信息</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('4')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="information_Sources_content">
                <div class="task_distribution information">
                  <div class="flex">
                    <div class="labelDiv">填报人：</div>
                    <div>{{datas.creator}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">单位及部门：</div>
                    <div>{{datas.creatorUnit}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">填报时间：</div>
                    <div>{{datas.createTime}}</div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="5" v-if="[2,3,5].includes(datas.applyStatus)">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">申请单位审批信息</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('5')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="information_Sources_content">
                <div style="display:flex;" class="marginB15">
                  <div style="width:150px;text-align:right">审批意见：</div>
                  <div>{{datas.approvalOpinion}}</div>
                </div>
                <div class="task_distribution information">
                  <div class="flex">
                    <div class="labelDiv">审批人：</div>
                    <div>{{datas.approvalUser}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">单位及部门：</div>
                    <div>{{datas.approvalDept}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">审批时间：</div>
                    <div>{{datas.approvalTime}}</div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
            <el-collapse-item name="6" v-if="[3,5].includes(datas.applyStatus)">
              <div slot="title" class="title_box">
                <div class="flex">
                  <div class="leftLine"></div>
                  <div class="fontSize16">受理单位审批信息</div>
                </div>
                <div style="display:flex;align-items: center;">
                  <i :class="judgeActive('6')!==-1? 'downArrow1':'downArrow2'" />
                </div>
              </div>
              <div class="information_Sources_content">
                <div style="display:flex;" class="marginB15">
                  <div style="width:150px;text-align:right">审批意见：</div>
                  <div>{{datas.tApprovalOpintion}}</div>
                </div>
                <div class="task_distribution information">
                  <div class="flex">
                    <div class="labelDiv">审批人：</div>
                    <div>{{datas.tApprovalUser}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">单位及部门：</div>
                    <div>{{datas.tApprovalDept}}</div>
                  </div>
                  <div class="flex">
                    <div class="labelDiv">审批时间：</div>
                    <div>{{datas.tApprovalTime}}</div>
                  </div>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TimeLine from "@/components/component/timeLine.vue";
import { GetApplyDetail, GetApplyAction } from "@/api/EmergencyDisposal/zydp.js";
import { GetFlowList } from "@/api/common.js";
export default {
  name: "EmergencyDetail",
  components: { TimeLine },
  data() {
    return {
      datas: {
        tableData: []
      },
      activeData: [],
      applyType: 0, // 资源类型
      activeNames: ["1", "2", "3", "4", "5", "6"],
      activities: [
      ],
      sourceInfoId: ""
    };
  },
  mounted() {
    this.applyType = this.$route.query.type;
    this.GetApplyDetails(this.$route.query.id);
    this.GetApplyActions(this.$route.query.id);
  },
  methods: {
    judgeActive(data) {
      return this.activeNames.indexOf(data);
    },
    goSourceInfo() {
      this.$router.push({
        path: "/EmergencyResponseinfo",
        query: {
          id: this.sourceInfoId
        }
      });
    },
    async GetApplyDetails(id) {
      const res = await GetApplyDetail({ id });
      const flows = await GetFlowList({ sourceInfoId: res.sourceInfoId });
      this.activities = flows.data;
      this.datas = res;
      this.sourceInfoId = res.sourceInfoId;
      if (this.applyType == 1) {
        this.datas.tableData = res.applyResourceTeamDetail;
      } else if (this.applyType == 2) {
        this.datas.tableData = res.applyResourceVehicleDetail;
      } else if (this.applyType == 3) {
        this.datas.tableData = res.applyResourceEquipDetail;
      } else if (this.applyType == 4) {
        this.datas.tableData = res.applyResourceSuppliesDetail;
      }
    },
    async GetApplyActions(id) {
      const res = await GetApplyAction({ businessId: id });
      this.activeData = res.data;
    },
    // 返回上一级
    AddFh() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="less">
.EmergencyDetail {
  width: 100%;
  height: 100%;
  .labelDiv {
    width: 150px;
    text-align: right;
  }
  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }
  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }
  :deep(.el-breadcrumb) {
    font-size: 16px;
  }
  .EmergencyDetail-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .EmergencyDetail-add {
      width: 83%;
      height: 100%;
      background-color: #fff;
      border-radius: 5px;
      overflow: auto;
      .EmergencyDetail-titel {
        margin: 0 20px;
        position: relative;
        padding: 10px 0 5px 0;
        border-bottom: solid 1px #ccc;
        .EmergencyDetail-top {
          text-align: center;
          font-family: 微软雅黑;
          font-weight: 400;
          font-style: normal;
          font-size: 28px !important;
        }
      }
      .EmergencyDetail-zt {
        overflow-y: auto;
        margin: 0 20px;
        font-size: 16px;
        :deep(.el-button--text) {
          color: #606266;
          padding: 2px;
        }
        .EmergencyList-dialog-form-item {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
        }
        .task_distribution {
          display: flex;
          span {
            color: #3561fd;
            text-decoration: underline;
            cursor: pointer;
          }
        }
        .task_distribution.information {
          flex-wrap: wrap;
          > div {
            width: 33%;
            margin-bottom: 12px;
            img {
              position: relative;
              top: 5px;
              left: 10px;
            }
          }
        }
      }
    }
  }
}
:deep(.el-step__icon.is-text) {
  border: none;
}
:deep(.el-collapse-item__content) {
  padding-top: 5px;
  padding-bottom: 10px;
  font-size: 16px;
}
.yuandian1 {
  display: inline-block;
  background-color: #ccc;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.ydBgcolor {
  background-color: #246dfd;
  box-shadow: 0px 0px 8px 0px rgb(10, 99, 241);
}
.EmergencyList-table-pag {
  float: right;
  margin-top: 10px;
  > div {
    line-height: 32px;
  }
}
:deep(.el-table) {
  font-size: 16px;
  tr {
    > :last-child {
      padding: 0;
      img {
        display: block;
        margin: auto;
      }
    }
  }
  .white-row {
    background: #f0f2f5;
  }
}
:deep(.el-collapse-item__header) {
  border-bottom: 1px solid #ccc;
}
:deep(.el-collapse-item__content) {
  padding: 15px 0;
}
:deep(.el-collapse-item__wrap) {
  border: none;
}
.grid-content {
  background-color: #b1c8f9;
  border: 1px solid #d7d7d7;
  text-align: center;
  padding: 8px 0;
}
.grid-content.bottom_col {
  background-color: #f0f2f5;
  border: 1px solid #d7d7d7;
}
.grid-content.top_col {
  background-color: #fff;
  border-top: none;
  border-bottom: none;
}
.downArrow1 {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../../../../assets/img/downArrow1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: rotate(-180deg);
}
.downArrow2 {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("../../../../assets/img/downArrow1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.title_box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:deep(.el-collapse-item__arrow) {
  display: none;
}
.width176 {
  width: 177px;
}
.width150 {
  width: 150px;
}
</style>
